<template>
  <div class="list">
    <Header></Header>
    <div class="page">
      <div class="page-head">
        <div class="h-title">
          <div class="pt-l">
            <i></i>
            角色管理
          </div>
          <div class="pt-r">
            <el-button type="primary" size="small">增加</el-button>
          </div>
        </div>
        <el-form :model="cardForm" ref="cardForm" class="card-form">
          <el-form-item prop="roleName" label="角色名">
            <el-input
              v-model="cardForm.roleName"
              suffix-icon="el-icon-edit"
            ></el-input>
          </el-form-item>
          <el-form-item class="form-btn">
            <el-button
              type="primary"
              size="small"
              :loading="isClick"
              @click="submitForm('cardForm')"
              >查询</el-button
            >
            <el-button
              size="small"
              :loading="isClick"
              @click="resetForm('cardForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="page-cont tree-cont">
        <TableCard
          ref="TableCard"
          :key="index"
          :classType="tableData.classType"
          :id="tableData.id"
          :index="index"
          :operate="tableData.operate"
          :operateArray="tableData.operateArray"
          :title="tableData.title"
          :search="tableData.search"
          :page="tableData.page"
          :limit="tableData.limit"
          :ajaxMsg="tableData.ajaxMsg"
          :tableTh="tableData.tableTh"
          v-on:rowClick="rowClickFun"
          v-on:addFun="addFun"
          :rowRed="false"
          style="width: 60%"
        ></TableCard>
        <div class="tree-box">
          <el-tree
            :data="treeData"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
          >
          </el-tree>
          <div class="tree-buttons">
            <el-button type="primary" size="medium" @click="getCheckedNodes"
              >通过 node 获取</el-button
            >
            <el-button size="medium" @click="getCheckedKeys"
              >通过 key 获取</el-button
            >
            <!-- <el-button @click="setCheckedNodes">通过 node 设置</el-button>
            <el-button @click="setCheckedKeys">通过 key 设置</el-button>
            <el-button @click="resetChecked">清空</el-button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TableCard from "@/components/tableCard.vue";
import Header from "@/components/Header.vue";
export default {
  name: "role",
  components: {
    TableCard,
    Header,
  },
  data() {
    return {
      cardForm: {},
      isClick: false,
      // table list
      tableData:{
          title: "数据列表",
          id: "indexTableList0",
          classType: "cursor-pointer",
          operate: true,
          operateArray: [
            {
              operateFun: 'addFun',
              msg: "msg",
              icon: "11",
              name: "添加11",
            },
          ],
          tableSort: true,
          more: "",
          search: false,
          page: true,
          limit: 500,
          ajaxMsg: {
            url: "/home/companyinfo/list",
            data: {},
          },
          tableTh: [
            {
              name: "监测时间",
              prop: "date",
            },
            {
              name: "是否验证",
              prop: "verify",
            },
            {
              name: "水质类别",
              prop: "water",
            },
            {
              name: "水温(℃)",
              prop: "sw",
            },
            {
              name: "PH(无量纲)",
              prop: "wlg",
              default: "0",
              width: 120,
            },
            {
              name: "溶解氧(mg/L)",
              prop: "rjy",
              default: "0",
              width: 120,
            },
            {
              name: "导电率(℃)",
              prop: "dll",
              width: 100,
            },
            {
              name: "浊度(NTU)",
              prop: "zd",
              width: 100,
            },
            {
              name: "高猛酸盐指数(mg/L)",
              prop: "gmsyzs",
              default: "0",
              width: 150,
            },
            {
              name: "氨氮(mg/L)",
              prop: "ad",
              default: "0",
              width: 100,
            },
            {
              name: "总磷(mg/L)",
              prop: "zl",
              width: 100,
            },
            {
              name: "总氮(mg/L)",
              prop: "zdan",
              width: 100,
            },
          ],
        },
      // tree
      treeData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    // 点击table tr
    addFun(res) {
      console.log(res);
    },
    // 点击table tr
    rowClickFun(res) {
      console.log(res);
    },
    // form
    submitForm() {
      const _this = this;
      _this.$refs.cardForm.validate(function (valid) {
        if (!valid) {
          _this.isClick = false;
          return false;
        }
        _this.$refs.TableCard.searchFun(_this.cardForm);
      });
    },
    resetForm(formName) {
      const _this = this;
      //重置表单
      _this.$refs[formName].resetFields();
    },
    // tree
    getCheckedNodes() {
      const _this = this;
      console.log(_this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      const _this = this;
      console.log(_this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      const _this = this;
      _this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1",
        },
        {
          id: 9,
          label: "三级 1-1-1",
        },
      ]);
    },
    setCheckedKeys() {
      const _this = this;
      _this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      const _this = this;
      _this.$refs.tree.setCheckedKeys([]);
    },
  },
};
</script>
